<template>
    <div id="product">
        <Vheader/>        
        <div class="prodcut-container" v-for="(item,i) in a_Products" :key="i" v-if="item.sku == $route.query.id">
            <div class="product-images"><img :src="item.image" /></div>
            <div class="product-wrap">
                <h2 class="product-name">{{item.title}}</h2>                
                <div class="product-info">
                    <p class="s-sku-product">SKU: <span>{{ item.sku }}</span></p>
                    <div class="product-free">
                        <span class="product-label">{{ Voff }} OFF</span>
                    </div>                    
                </div>
                <div class="price-box">
                    <p class="special-price">{{item.price}}</p>
                    <p class="old-price">{{item.originPrice}}</p>
                </div>                
            </div>
        </div>        
        <div class="main-content">

        <Vtext v-if="tag > 100"></Vtext>
        <VUpload v-if="tag < 100"></VUpload>
        <button id="btn" @click="addCart(item);modal()"  v-for="(item,i) in a_Products" :key="i" v-if="item.sku == $route.query.id" >Add to Cart</button>        
        </div>
        <div>
            <VProductList></VProductList>
        </div>
        <div class="modal" v-if="ashow">
            <div class="msg-box">
                <div class="close-new"><i class="photofont icon photo-close" @click="close"></i></div>
                <p class="add-cart-product fs18 txt-u c3 ls1 content"><i class="photofont icon photo-zhengque2 fs fs60 c5ac pb30"></i>You've just added this product to the cart</p>
                <router-link to="/cart" class="success-message-button"> View Cart & Checkout</router-link>
            </div>
        </div>
    </div>
</template>
<script>

import Vheader from './../template/header.vue'
import VUpload from './view/upload.vue'
import Vtext from './view/text/text.vue'
import VProductList from './rule/productList.vue'
import {getAutumnSale} from './../ajax/api.js'
import { mapActions } from 'vuex'
import { MessageBox } from 'mint-ui';
export default {
    name:'product',
    components: {
        Vheader,
        VUpload,
        Vtext,
        VProductList
    
    },
    data(){
        return { 
            a_Products:[{
                "sku":"",
                "image":'',
                "price":'',
                "originPrice":'',
                "title":''
            }],               
            tag:this.$route.query.totalReviews,
            price:this.$route.query.price.substr(1),
            originPrice:this.$route.query.originPrice.substr(1),
            Voff:0,
            ashow:false

        }
    },    
    mounted: function () {
       //off折扣 = （原价 - 特价）/原价*100;
       this.Voff= Math.round( (Number(this.originPrice) - Number(this.price) ) / Number(this.originPrice) * 100) + "%";
       window.sessionStorage.getItem("key");
       window.sessionStorage.setItem("key",this.$route.query.img);
       console.log(this.$route.query.totalReviews)
    },
    created: function () {
        this.loadData();
    },
    methods:{
        async loadData() {
            await getAutumnSale(this.primaryKey)
                .then(({code,message,data}) => {
                //console.log({code,message,data});                
                console.log(data.meetings);
                this.a_Products = data.meetings[0].products;
                this.title_text = data.meetings[0].title;                
            })
            .catch(error => {
                if (error) {
                    console.log("getAutumnSale", {
                    error
                });
                }
            })            
        },
        ...mapActions(['addCart']),
        modal(){
            setTimeout(()=>{
                if(!this.ashow){
                this.ashow = true;
            }
            },1500)

            console.log(this.ashow)
        },
        close(){
            if(this.ashow = true){
                this.ashow = false;
            }
            console.log(this.ashow)
        }
        
        
        
    }
   
}
</script>
<style>
#btn{
    background: #e60044;
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 14px;
    margin-right: 0;
    margin-left: 0;
    overflow: visible;
    border: 0;
    padding: 0;
    margin-top: 10px;
}	
.product-images img{
    width:100%;
}
.product-wrap{
    text-align: left;
    padding: 0 10px;
}
.product-name{
    font-size: 1rem;
}
.s-sku-product{
    font-size: 0.8rem;
    margin: 0;
}
.product-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product-label{
    font-size: 0.8rem;
    color: #f00;
    font-weight: bold;
}
.price-box{
    margin: 0.8rem 0;
    display: flex;
}
.price-box p {
    margin-bottom: 0;
    margin-top: 0;
    font-size: 1rem;
    font-weight: 600;
}
.old-price{
    margin-left:12px;
    text-decoration: line-through;
    color: #999;
}
.modal{
    width: 100vw;
    height:100vh;
    position: fixed;
    left: 0;
    right:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.5);
    z-index: 21;
    padding: 0 10px;
}
.msg-box{
    width: calc(100% - 20px);
    height: 300px;
    background: #fff;
    transform: translateY(45%);
}
.msg-box .close-new{
    text-align: right;
}
.msg-box .photofont.icon.photo-close{
    font-size: 25px;
}
.add-cart-product{
    font-size: 16px;
    font-weight: 600;
}
.add-cart-product i {
    color: #5acb7a;
}
.success-message-button{
    background: #e9034d;
    color: #fff;
    display: inline-block;
    padding: 10px 40px;
}
</style>

